<template>
  <ul id="my-tree"  v-if="treeData">
    <item class="item" v-for="item in treeData" :key="item.meta_id" :model="item" :multiple="true" v-on:on-setting-change="handleSettingChange"></item>
  </ul>
</template>
<script>
import Vue from 'vue'
let templateStr = `<li>
        <el-checkbox :label="model.tgt_name" v-model="isChecked" @change="handleTreeNode($event, model)" :indeterminate="isShow"></el-checkbox>
        <ul :class="{ 'sub-tree': true, 'active': isShow }" v-if="isFolder">
          <item class="item" v-for="item in model.children" :key="item.meta_id" :model="item" :multiple="false" v-on:on-setting-change="handleSettingChange"></item>
        </ul>
      </li>`
let item = Vue.component('item', {
  template: templateStr,
  props: {
    model: Object,
    multiple: Boolean
  },
  data () {
    return {
      isShow: false,
      isChecked: false
    }
  },
  computed: {
    isFolder () {
      return this.model.children && this.model.children.length
    }
  },
  methods: {
    handleTreeNode (checked, obj) {
      let _self = this
      if (this.isFolder) {
        this.isShow = !this.isShow
        this.isChecked = !checked
      }
      if (checked) {
        if (!this.multiple && !this.isFolder) {
          this.checkNode(_self, 'check')
        }
      } else {
        this.checkNode(_self, 'cancel')
      }
      if (!this.isFolder) {
        let changeData = {
          checked: checked,
          data: obj
        }
        this.$emit('on-setting-change', changeData)
      }
    },
    checkNode (node, mode) {
      let checkFlag = false
      node.$parent.$children.forEach(item => {
        if (item.$el.className === 'item' && item.isChecked) {
          if (mode === 'check') {
            item.isChecked = false
          } else if (mode === 'cancel') {
            checkFlag = true
          }
        }
      })
      if (mode === 'check') {
        node.isChecked = true
        if (!node.$parent.isChecked) {
          node.$parent.isChecked = true
        }
      } else if (mode === 'cancel') {
        if (!checkFlag) {
          node.$parent.isChecked = false
        }
      }
      if (node.$parent.$parent && node.$parent.$parent.$el.className === 'item') {
        this.checkNode(node.$parent, mode)
      }
    },
    handleSettingChange (dataObj) {
      this.$emit('on-setting-change', dataObj)
    }
  }
})
export default {
  name: 'Tree',
  props: ['treeData'],
  components: {
    'item': item
  },
  data () {
    return {
      selectList: []
    }
  },
  methods: {
    handleSettingChange (dataObj) {
      if (this.selectList.length > 0) {
        this.selectList.forEach((item, index) => {
          if (item.data.meta_id === dataObj.data.meta_id || item.data.meta_id.indexOf('MG') !== -1) {
            this.selectList.splice(index, 1)
          }
        })
        this.selectList.splice(this.selectList.length, 0, dataObj)
      } else {
        this.selectList.splice(0, 0, dataObj)
      }
      this.$emit('on-setting-change', this.selectList)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scope>
ul,li
  list-style none
  padding 0
  margin 0
#my-tree
  .item
    display block
    line-height 30px
    cursor pointer
    user-select none
    transition max-height .3s linear
    .el-checkbox
      display block
      .el-checkbox__input
        position relative
  .sub-tree
    padding-left 10px
    max-height 0px
    overflow hidden
    transition max-height .3s linear
    &.active
      max-height 200px
      overflow auto
      &::-webkit-scrollbar
        width 0
        height 0
</style>
